<template>
	<el-input
		class="edit-input"
		:disabled="!contenteditable"
		v-model="textarea"
		:autosize="true"
		resize="none"
		type="textarea"
		@change="changeEvent"
		@input="changeEvent"
	/>
</template>

<script setup lang="ts">
import { toRefs, ref, watch } from "vue";

let props = defineProps({
	content: {
		default: ""
	},
	contenteditable: {
		type: Boolean,
		default: false
	}
});
let {content,contenteditable} = toRefs(props)
let emits = defineEmits(["update:content"]);
const changeEvent=()=>{
	console.log("changeEvent");
	updateEvent(textarea.value)
}
const updateEvent=(text:any)=>{
	console.log(text);
	emits("update:content",text);
}
let textarea:any = ref("")
watch(content,()=>{
	textarea.value = content.value;
},{deep:true,immediate:true});
defineExpose({
	updateEvent
});
</script>

<style scoped lang="scss">
.edit-input{
	width: 100%;
	&.el-textarea{
		border-radius: 5px;
		border: 2px solid transparent;
		:deep(.el-textarea__inner){
			box-shadow: none;
			background-color: inherit;
			color: inherit;
			cursor: pointer;
			font-weight: inherit;
			padding: 0;
		}
		&:not(.is-disabled):has(.el-textarea__inner:focus){
			border: 2px solid #000000;
		}
	}
}
</style>

